<template>
    <div class="music-player">
        <ul class="player-ul">
            <audio :src="songobj.songUrl" ref="music" @timeupdate="musicPlaying"></audio>
            <li class="img-part" @touchstart="show">
                <img :src="songobj.picUrl" alt="">
            </li>

            <li class="title" @touchstart="show">
                {{songobj.name}}-{{songobj.artists}}
            </li>

            <li class="play-button" @touchstart="musicPlay" >
                <div :class="{button : true,iconfont : true ,'icon-bofang' : isPlay,'icon-bofang-bar' : !isPlay}">
                    <canvas width="48" height="48" ref="canvas"></canvas>
                </div>
            </li>

            <li class="list">
                <i class="iconfont icon-gedan"></i>
            </li>
        </ul>
        <transition name="music"
            enter-active-class = "animate__animated animate__fadeInUpBig"
            leave-active-class=  "animate__animated animate__fadeOutDownBig"
        >
            <music-player :getsongdata="songobj" :nowtime="nowTime" :maxtime="maxTime" :isplay="isPlay" :voicenum="voiceNum" :songid="songobj.id" v-if="isShow" @getshow="getshow" v-on="$listeners"></music-player>
        </transition>
    </div>
</template>

<script>
import 'animate.css';
import musicPlayer from './music-player.vue';
export default {
  components: { musicPlayer },
    data(){
        return{
            playTime : 0,
            isPlay : true,
            myCanvas : "",
            songData : "",
            music : "",
            canAuto : false,
            nowTime : 0,
            maxTime : 0,
            ctx : "",
            isShow : false,
            voiceNum : 0,
            notSong : true
        }
    },
    mounted(){
        axios.defaults.withCredentials = true;
        this.$nextTick(()=>{
            this.myCanvas = this.$refs.canvas;
            this.music = this.$refs.music;
            this.voiceNum = this.music.volume;
            this.ctx = this.myCanvas.getContext("2d");
            this.bar(1,"#fff");
        });
        if(this.songobj.picUrl === undefined) {
            
        }
    },
    methods:{
        musicPlay(){
            if(!this.notSong){
                if(this.music.paused){
                    this.isPlay = false;
                    this.music.play();
                }else {
                    this.isPlay = true;
                    this.music.pause();
                }
            }else {
                return;
            }
        },
        musicPlaying(){
            this.maxTime = this.music.duration;
            this.nowTime = this.music.currentTime;
            let price = this.nowTime/this.maxTime;
            if(this.nowTime === 0) {
                this.isPlay = true;
                this.music.pause();
                this.ctx.clearRect(0,0,48,48);
                this.bar(1,"#fff");
                return;
            }
            if(this.maxTime === this.nowTime){
                this.ctx.clearRect(0,0,48,48)
                this.isPlay = true;
                this.music.pause();
                this.bar(1,"#fff");
                return;
            }
            this.bar(price,"#33CCBB");
        },
        bar(price,color){
            this.ctx.beginPath();
            this.ctx.strokeStyle = color
            this.ctx.arc(24, 24, 16, Math.PI * 3 / 2, (Math.PI * 3 / 2 + Math.PI * 2 / 180 + price * Math.PI * 2), false);
            this.ctx.stroke();
            this.ctx.closePath();
        },
        show(){
            this.isShow = !this.isShow;
        },
        getshow(isShow){
            this.isShow = isShow
        },
        amount(percent){
            this.voiceNum = percent*1
            this.music.volume = this.voiceNum;
        },
        progress(percent){
            this.music.pause();
            this.isPlay = true;
            this.nowTime = this.maxTime * percent;
            this.music.currentTime = this.nowTime;
            this.ctx.clearRect(0,0,32,32);
            this.bar(1,"#fff");
            this.bar(percent,"#33CCBB");
        }
    },
    props : {
        songobj : {
            type : Object
        }
    },
    watch : {
        songobj : {
            deep: true,
            handler(){
                let time = null;
                this.notSong = false;
                clearTimeout(time);
                time =setTimeout(()=>{
                    this.maxTime = this.music.duration;
                },200)
            }
        }
    }

}
</script>

<style lang="scss" scoped>
    @keyframes rotateAnimate {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
    .music-player {
        width: 100%;
        
    }

    .player-ul {
        width: 100%;
        height: 3rem;
        display: flex;
        position: fixed;
        left: 0rem;
        bottom: 4rem;
        padding: 0.5rem 0.5rem;
        background: rgba(4, 4, 4, 0.5);
        z-index: 99;
    }

    .img-part {
        width: 3rem;
        height: 3rem;
        box-sizing: border-box;
        border-radius: 50%;
        overflow: hidden;
        

        >img {
            width: 100%;
            animation: rotateAnimate infinite linear 30s;
        }
    }

    .title {
        flex: 1;
        height: 3rem;
        line-height: 3rem;
        white-space: nowrap;
		/*溢出部分文字隐藏*/
		overflow: hidden;
		/*溢出部分省略号处理*/
		text-overflow: ellipsis;
        padding: 0rem 2rem;
        color: #fff;
        box-sizing: border-box;
    }

    .play-button {
        width: 3rem;
        height: 3rem;


        .button {
            width: 3rem;
            height: 3rem;
            position: relative;
            color: #33CCBB;

            >canvas {
                position: absolute;
                top: 0px;
                left: 0px;
            }
        }
        .icon-bofang-bar {
            font-size: 3rem;

            &::before {
                position:absolute;
                top: 52%;
                left: 49%;
                transform: translate(-50%,-50%);
            }
        }

        .icon-bofang{

            &::before{
                position: absolute;
                top: 52%;
                left: 53%;
                transform: translate(-50%,-50%);
            }
        }
    }

    .list {
        width: 3.5rem;
        height: 3rem;
        text-align: center;
        line-height: 3rem;

        .iconfont {
            font-size: 2rem;
            color: #fff;
        }
    }
</style>

